<template>
    <el-row class="main-cont padd20">
        <!--        <el-row>
        </el-row> -->
        <el-row :gutter="20" class="padd20 box box-pack-start" style="height: calc(100% - 40px);">
            <el-col :span="24" class="box box-tb">
                <el-col class="title box box-pack-between" style="margin-bottom: 20px;">
                    <div class="btn box box-algin-center" style="padding-right:0px;">
                        <el-select v-model="form.type" placeholder="请选择" class="text" @change="handleSearch">
                            <el-option label="全部" value="" key=""></el-option>
                            <el-option :label="v.name" :value="v.startTime" v-for="(v, i) in options" :key="i"></el-option>
                        </el-select>
                        <el-input class="ml20" placeholder="搜索" v-model="form.seachText" v-if="maxRole != `cmo`">
                            <i slot="suffix" class="el-input__icon el-icon-search cp" @click="handleSearch"></i>
                        </el-input>

                    </div>
                    <div class="btn box box-algin-center" style="padding-right:0px;">
                        <el-button class="reset-comfirm-btn" v-if="maxRole == `admin`" @click="showSj">
                            引用</el-button>
                        <el-button class="reset-comfirm-btn"
                            v-if="maxRole == `team` || maxRole == `cmo` || maxRole == `admin`" @click="clickAdd"
                            style="background: #626bf1; color: #fff;">+
                            创建</el-button>
                    </div>
                </el-col>

                <el-col :span="24" v-if="list.length != 0">
                    <el-col :span="6" class="col-list cp minwith200" v-for="(item, index) in list" :key="index"
                        style="margin-bottom: 10px;" @click.native="goCourse(item.id)">
                        <div class="grid-content bg-purple">
                            <el-image :src="item.img"
                                onerror="https://yhykt.oss-cn-beijing.aliyuncs.com/AC5DC3A7FAE54EC8ACB2224460EC86968a9e3a8f3094a247e03cd930aa6fc67.png?Expires=4804053091&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=LAXUO1s9pze0f7jP50RWNH7RLVM%3D"
                                class="img" fit="cover">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <!-- el-col class="tl tlt">
                                <span class="course-name">{{ item.title.substr(0, 7) }}</span>
                                <span class="sjtype">{{item.sjtypename1}}</span>
                            </el-col> -->
                            <el-col class="tl tlt">
                                <span class="course-name">{{ item.title.substr(0, 7) }}</span>
                                <span class="sjtype" v-if="item.type == '0'">生活</span>
                                <span class="sjtype" v-if="item.type == '1'">生产</span>
                                <span class="sjtype" v-if="item.type == '2'">服务</span>
                                <span class="sjtype" v-if="item.type == '3'">其他</span>
                            </el-col>
                            <el-col class="tl tlword" style="padding: 0 30px 0 13px;font-size: 10px;height: 32px;">
                                {{ item.ldmb }}
                            </el-col>
                            <!-- <el-col style="font-size: 10px;text-align: left;">
                                {{`${item.sjtypename1} / ${item.sjtypename2}`}}
                            </el-col> -->
                            <div class="delete" @click.stop="">
                                <el-dropdown>
                                    <el-tag type="info">
                                        <i class="el-icon-more"></i>
                                    </el-tag>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="add" v-if="maxRole == 'cmo'"
                                            @click.native="publicPractiseCmo(item.id, item.status)">{{ item.status ? `取消发布`
                                                : `添加到公共实践` }}</el-dropdown-item>
                                        <el-dropdown-item command="edit"
                                            @click.native="handleEdit(item)">编辑</el-dropdown-item>
                                        <el-dropdown-item command="delete"
                                            @click.native="handleDelete(item.id)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>

                    </el-col>
                    <el-col>
                        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
                            :total="pages.total" :current-page.sync="pages.current" :page-size="pages.rows"
                            hide-on-single-page></el-pagination>
                    </el-col>
                </el-col>
                <el-row class="height100 box box-pack-center box-align-center" v-else>
                    <el-empty description="暂无劳动实践" image="../../../static/image/nodata/nodata.png"></el-empty>
                </el-row>

            </el-col>
        </el-row>
        <select-sj :dialogVisible="showSjlist" :testdata="list" @clickClose="closecouslist()" title="选择公共实践" ref="clist" @saveCous="saveCous">
        </select-sj>
    </el-row>
</template>


<script>
import minxins from "@/utils/dictMinxins.js";
import {
    wyv3put,
    wyv3post
} from "@/http/axios.js";
import selectSj from './components/ldsj.vue'
export default {
    components: { selectSj },
    mixins: [minxins],
    data() {
        return {
            page: {
                total: 0,
                pageSize: 12,
                pageNum: 1,
                list: []
            },
            form: {
                seachText: '',
                type: '',
                schoolId: this.$store.state.schoolId
            },
            list: [],
            courseSHow: false, //创建劳动课程
            title: "添加成员",
            titles: '教研团队信息', //----------------------
            tip: "创建劳动课程",
            info: {},
            loginInfo: this.$store.state.loginInfo,
            maxRole: this.$store.state.maxRole,
            jyzid: 0,
            jyzids: 0, //---------------------
            cyList: [],
            listsize: 0,
            addShow: false,
            schoolid: this.$store.state.schoolId,
            isIndeterminate: false,
            check: [],
            checkAll: false,
            checkedGameId: [],
            showSjlist: false,
            pages: {
                rows: 8,
                page: 1,
                total: 0,
                current: 1
            },
        };
    },
    mounted() {
        if (this.loginInfo.roleList.indexOf(4) != -1) {
            this.addShow = true;
        }
        if (this.maxRole == 'cmo') {
            this.getCmoPracticeList()
        } else {
            this.getTrJyz()
            this.getAdminPracticeList()
        }
    },
    methods: {
        //搜索查询
        handleSearch() {
            if (this.maxRole == 'cmo') {
                this.getCmoPracticeList()
            } else {
                this.getAdminPracticeList()
            }
        },
        // 引用实践 添加弹框
        showSj() {
            this.$refs.clist.getCourseList();
            this.showSjlist = true;
        },
        //关闭添加实践弹框
        closecouslist() {
            this.showSjlist = false;
        },
        //添加按钮
        saveCous(data) {
            if(data.length>0){
                this.$confirm('确定添加到实践任务吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(data, 'tianjia')
                    // data.forEach((item, i) =>{
                        
                    // })
                    this.$ajax.post('/yldsj/use', {
                            schoolid: this.schoolid,
                            sjids: data.toString()
                        }).then(res => {
                            console.log(res);
                            if (res.code == 0) {

                                // this.getPublicCourse();
                                this.getAdminPracticeList()
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                            }
                        })
                    
                }).catch(() => { });
            }else{

            }
            
        },
        //切换分页数据
        handleCurrentChange(val) {
            console.log(val);
            this.pages.page = val
            if (this.maxRole == 'cmo') {
                this.getCmoPracticeList()
            } else {
                this.getAdminPracticeList()
            }
        },
        //管理员获取实践列表
        getAdminPracticeList(pageNum) {
            console.log(111);
            let params = Object.assign({}, this.pages, this.form)
            delete params.total
            this.$api.wyv3.getAdminPracticeList(params).then(res => {
                if (res.code == 200) {
                    this.list = res.data.records;
                    this.pages.rows = res.data.size
                    this.pages.page = res.data.current
                    this.pages.total = res.data.total
                    // console.log(this.cousList,'this.cousListthis.cousListthis.cousList-----')
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        //运营管理员 -- 查询实践
        getCmoPracticeList() {
            let params = Object.assign({}, this.pages, this.form)
            delete params.total
            delete params.searchText
            this.$api.wyv3.getCmoPracticeList(params).then(res => {
                if (res.code == 200) {
                    this.list = res.data.records;
                    this.pages.rows = res.data.size
                    this.pages.page = res.data.current
                    this.pages.total = res.data.total
                    // console.log(this.cousList,'this.cousListthis.cousListthis.cousList-----')
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        //
        publicPractiseCmo(id, status) {
            this.$confirm(`${status ? '确定取消发布公共实践吗？' : '确定添加到公共实践吗？'}`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                let url;
                let params = {
                    ldsjid: id
                };
                if (!status) {
                    url = "/ldsj/public"
                    wyv3post(url, params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.getCmoPracticeList();
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        }
                    })
                } else {
                    url = "/ldsj/public/cancel"
                    wyv3put(url, params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.getCmoPracticeList();
                            this.$message({
                                message: '取消成功',
                                type: 'success'
                            });
                        }
                    })
                }
            }).catch(() => { });
        },
        init() {
            for (let i = 0; i < this.cyList.length; i++) {
                this.checkedGameId.push(this.cyList[i].id);
                console.log('>>>' + this.checkedGameId);
                console.log(this.cyList.length)
            }
        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除该实践, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = "/yldsj/delete";
                this.$ajax.post(url, {
                    id: id
                }).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.pages.page = 1
                        if (this.maxRole == 'cmo') {
                            this.getCmoPracticeList()
                        } else {
                            this.getAdminPracticeList();
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                })
            }).catch();

        },
        //编辑课程
        handleEdit(item) {
            localStorage.setItem('isDisabled', false)
            localStorage.setItem('ldsjId', item.id)
            this.$router.push("/ldsj_jyzz/EditPracticeCmo")
        },
        //课程详情
        goCourse(sjid) {
            localStorage.setItem('isDisabled', true)
            this.$router.push("/ldsj_jyzz/EditPracticeCmo")
            localStorage.setItem('ldsjId', sjid)

        },
        handleCheckAllChange(val) {
            this.check = val ? this.checkedGameId : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cyList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cyList.length;
        },
        getTrJyz() {
            this.$api.Admin.getJyzData({
                'schoolid': this.schoolid
            }).then(res => {
                if (res.code == '0') {
                    this.jyzid = res.data;
                    this.$store.commit("setJyzid", res.data);
                    // this.xtjyLdsjList();
                    // this.xtjyUserList();
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        xtjyUserList() {
            this.$api.jyz.xtjyUserList({
                'jyzid': this.jyzid
            }).then(res => {
                if (res.code == '0') {
                    this.cyList = res.list;
                    this.init();
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        xtjyLdsjList(pageNum) {
            this.$api.jyz.xtjyLdsjList({
                'jyzid': this.jyzid,
                'seachText': this.searchText,
                pageSize: this.page.pageSize,
                pageNum: pageNum
            }).then(res => {
                console.log(res);
                if (res.code == '0') {
                    this.page = res.list;
                    this.listsize = res.listsize;
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        addTr() {
            this.$refs.child.listNotInJyzUser();
            this.dialogVisible = true;
        },
        clickClose() {
            this.dialogVisible = false
        },
        //编辑
        upck() {
            this.dialogVisibles = true;
        },
        clickCloses() {
            this.dialogVisibles = false;
        },
        //添加劳动实践
        clickAdd() {
            localStorage.setItem('isDisabled', false)
            this.$router.push({
                path: "/ldsj_jyzz/CreatPracticeCmo"
            })
            // if (this.maxRole == 'cmo') {
            //     this.$router.push({
            //         path: "/ldsj_jyzz/CreatPracticeCmo"
            //     })

            // } else {
            //     this.$router.push({
            //         path: "/ldsj_jyzz/cjsj_jyzz"
            //     })
            // }

        },
        clickCloseCourse() {
            this.courseSHow = false
        }
    }
};
</script>

<style scoped lang="scss">
.ym,
.sf {
    width: 120px;
}

.practice {
    // display: flex;
}

.sf {
    text-align: center;
}

/deep/.jy-team[data-v-580db919] {
    overflow-y: initial;
}

/deep/ .fofnk {
    width: 100%;
    padding-left: 12px;
    text-align: left;

    >.num {
        display: inline-block;
        font-size: 12px;
        width: 20px;
    }

    >.checkStyle {
        >.el-checkbox__input {
            padding-top: 27px;
        }
    }
}

/deep/.el-checkbox {
    margin-right: 0 !important;

    >.el-checkbox__input {
        padding-bottom: 30px !important;
    }
}

/deep/.el-checkbox__input {
    margin-bottom: 0 !important;
}

/deep/ .team::-webkit-scrollbar {
    height: 0 !important;
}

.main-cont {
    height: 100%;
}

.el-row {
    &:last-child {
        margin-bottom: 0;
    }
}

.col-list {
    border-radius: 12px;

    &:hover {
        .delete {
            display: block;
        }
    }
}

.bg-purple {
    background-color: #fafbff;
    transition: .3s ease-in-out;
}

.bg-purple:hover {
    box-shadow: 2px 6px 13px 0px rgba(128, 130, 139, 0.9);
}

.el-plus {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 26px;
    background: linear-gradient(-13deg, #626BF1, #989BFA);
    border-radius: 16px;
    color: #fff;
    font-size: 26px;
    font-style: normal;
}

.border {
    background-color: #f8f9fc;
    color: #626BF1;
    border: 1px dotted #BEBDE6;
    min-width: 200px;
    border-radius: 12px;
    height: 240px;
    overflow: hidden;

    &:hover {
        border: 1px dotted #626bf1;
    }
}

.grid-content {
    position: relative;
    padding-bottom: 20px;
    min-width: 200px;
    border-radius: 12px;
    height: 180px;
    overflow: hidden;

    .img {
        width: 100%;
        height: 100px;
    }

    .tlt {
        display: flex;
        justify-content: space-between;
    }

    .course-name {
        font-size: 14px;
        font-weight: bold;
    }

    .createuser {
        // width: 40px;
        display: block;
        font-size: 14px;
    }

    .course-info {
        span {
            color: #888F9E;
        }
    }

}

.minwith200 {
    min-width: 210px;
}

.jy-team {
    position: relative;
    min-width: 260px;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    box-shadow: 1px 3px 9px 0px rgba(176, 181, 191, 0.4);

    .add-btn {
        color: #626BF1;
        font-weight: 600;
        width: 65px;
        display: flex;
        justify-content: space-between;

        >.el-icon-plus {
            font-weight: 600;
        }
    }

    .user-name {
        width: 140px;

        .es-width {
            text-align: left;
            width: 80px;
            overflow: hidden;
        }
    }

    .role {
        min-width: 110px;
        text-align: center;
    }
}

.sjtype {
    width: 34px;
    text-align: center;
    // padding: 4px 8px 4px 8px;
    // margin-left: 30px;
    height: 24px;
    line-height: 24px;
    background: #eaebf5;
    border-radius: 9px;
    color: #5e6266;
    font-size: 12px;
}

.ldmb {
    padding: 0 30px 0 25px;
}

.tlword {
    word-break: break-all;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 2;
}

.delete {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    // width: 60px;
    // height: 20px;
    // line-height: 20px;
    // background-color: rgba(254, 0, 0, .7);
    // color: #fff;
    // border-radius: 3px;
    // font-size: 14px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>
